<!--页面组件-->
<template>
    <div>
      <div class="tempxyz tableHeight systemFooter">
        <CCard class>
          <CCardHeader>
            <strong class="headerFont">区域产品生产</strong>
            <div style="display: flex; float: right" @keyup.enter="getTaskList()">
                <div style="margin-right: 5px">
                <label class="labelName">分类&nbsp;&nbsp;</label>
                <Input
                  :title="groupName"
                  v-model="name"
                  placeholder="请输入任务名称搜索..."
                  style="width: 200px"
                  maxlength="50"
                />
              </div>
              <div style="margin-right: 5px">
                <label class="labelName">任务名称&nbsp;&nbsp;</label>
                <Input
                  :title="groupName"
                  v-model="name"
                  placeholder="请输入任务名称搜索..."
                  style="width: 200px"
                  maxlength="50"
                />
              </div>
              <CButton color="info" @click="add()" class="system-btn-style">
                <CIcon name="cil-plus" />&nbsp;任务
              </CButton>
            </div>
          </CCardHeader>
          <CCardBody class="card-body">
            <div style="height: calc(100% - 100px); margin-top: 30px">
              <Table
                border
                stripe
                max-height="680"
                ref="table"
                :columns="getColumns"
                :data="data"
              ></Table>
            </div>
            <div
              style="
                width: 98%;
                border-top: 1px solid #dcdee2;
                background-color: #ffffff;
                height: 70px;
                z-index: 1000;
                position: absolute;
              "
            >
              <Page
                :total="this.allNum"
                :current="pageNum"
                class="pageStyle"
                show-sizer
                show-elevator
                show-total
                @on-change="pageChange"
                @on-page-size-change="pageSizeChange"
              />
            </div>
          </CCardBody>
        </CCard>
      </div>
  
      <!-- 新建任务 -->   
      <CModal
        :show.sync="addTask"
        :closeOnbackdrop="false"
        title="新增任务"
        centered
        size="lg"
      >
        <addTaskRegularRisk 
          ref="addTaskRegularRisk" 
          @closeaddTaskRegularRisk="closeAddTask123"
        ></addTaskRegularRisk>
        <template #footer class="footerBtns">
          <CButton @click="addTaskCancel" color="info" class="delAnniu"
            >取消</CButton
          >
          <CButton @click="addTaskOk" color="info">保存</CButton>
        </template>
      </CModal>
  
      <!-- 编辑任务 -->
      <CModal
        :show.sync="updateTask"
        :closeOnbackdrop="false"
        title="编辑任务"
        centered
        size="lg"
      >
        <updateTaskRegularRisk
          ref="updateTaskRegularRisk"
          @closeupdateTaskRegularRisk="closeupdateTask"
        ></updateTaskRegularRisk>
        <template #footer class="footerBtns">
          <CButton @click="updateTaskCancel" color="info" class="delAnniu"
            >取消</CButton
          >
          <CButton @click="updateTaskOk" color="info">保存</CButton>
        </template>
      </CModal>
  
      <!-- 删除数据 -->
      <Modal
        v-model="delShow"
        draggable
        scrollable
        title="删除主任务"
        :styles="modalStyle"
      >
        <p slot="header" class="modalHeader">
          <img src="@/assets/icons/shanchu.svg" alt />
          <span style="margin-left: 5px">删除主任务</span>
        </p>
        <div class="modalBody">
          <p>删除主任务时与主任务相关的信息都会丢失</p>
          <p>请确认是否删除?</p>
        </div>
        <template #footer class="footerBtns">
          <CButton @click="delShow = false" color="info" class="delAnniu"
            >取消</CButton
          >
          <CButton @click="delOk" color="info">确定</CButton>
        </template>
      </Modal>
      <!-- 启动任务 -->
      <CModal
        :show.sync="runShow"
        :closeOnBackdrop="false"
        title="启动任务提示"
        centered
      >
        <div class="modalBody">
          <p>请确认是否启动任务?</p>
        </div>
        <template #footer class="footerBtns">
          <CButton @click="runCancel" color="info" class="delAnniu">取消</CButton>
          <CButton @click="runOk" color="info">确定</CButton>
        </template>
      </CModal>
  
      <!-- 暂停任务 -->
      <CModal
        :show.sync="banShow"
        :closeOnBackdrop="false"
        title="暂停任务提示"
        centered
      >
        <div class="modalBody">
          <p>请确认是否暂停任务?</p>
        </div>
        <template #footer class="footerBtns">
          <CButton @click="banCancel" color="info" class="delAnniu">取消</CButton>
          <CButton @click="banOk" color="info">确定</CButton>
        </template>
      </CModal>
  
    </div>
  </template>
  
  <!--js代码-->
  <script>
  import updateTaskRegularRisk from "@/views/taskMonitor/RegionalupdateTaskRegularRisk.vue";
  import addTaskRegularRisk from "@/views/taskMonitor/RegionaladdTaskRegularRisk.vue";
  const fields = [
    {
      label: "序号",
      key: "number",
      _style: "width:60px;text-align: center;background:rgba(241,244,249,1);",
      align: "center",
    },
    {
      label: "任务名称",
      key: "groupTaskName",
      _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
      align: "center",
    },
    {
      label: "任务来源",
      key: "taskSourceName",
      _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
      align: "center",
    },
    {
      label: "用户名",
      key: "show_userName",
      _style: "width:auto;text-align: center;background:rgba(241,244,249,1);",
      align: "center",
    },
    {
      label: "开始时间",
      key: "createTime",
      _style: "width:170px;text-align: center;background:rgba(241,244,249,1);",
      align: "center",
    },
    {
      label: "结束时间",
      key: "endTime",
      _style: "width:170px;text-align: center;background:rgba(241,244,249,1);",
      align: "center",
    },
    {
      label: "优先级",
      key: "show_details1",
      _style: "width:75px;text-align: center;background:rgba(241,244,249,1);",
      align: "center",
    },
    {
      label: "景数(成功/失败)",
      key: "show_imageNumber",
      _style: "width:120px;text-align: center;background:rgba(241,244,249,1);",
      align: "center",
    },
    {
      label: "状态",
      key: "show_details2",
      _style: "width:90px;text-align: center;background:rgba(241,244,249,1);",
      align: "center",
    },
    {
      label: "操作",
      key: "show_details",
      _style: "width:300px;text-align: center;background:rgba(241,244,249,1);",
      align: "center",
    },
  ];
  export default {
    name: "RegularRiskMonitor",
    components: {
      // TableList,
      updateTaskRegularRisk,
      addTaskRegularRisk,
    },
    data() {
      return {
        modalStyle: { top: "340px" },
  
        groupName: "",
        /** 查询日志参数 */
        lookLogsModal: false,
  
        lookLogsTable: [],
        tableColData: "",
        /** 查询日志参数*/
        sourceId: 6,
        updId: 0,
        searchName: 0,
        runShow: false,
        banShow: false,
        delShow: false,
        data: [],
        allDataList: [],
        clickId: 0,
        fields,
        loading: true,
        currentPage: 1,
        pages: 0,
        total: 0,
        allNum: 0,
        pageNum: 1,
        pageSize: 10,
        name: "",
        status: "",
        showimgsearchicon: true,
        showimgofficon: false,
        updata: {},
        addTask: false,
        updateTask: false,
        sateList: [
          {
            value: "",
            label: "请选择",
          },
          {
            value: "GF1",
            label: "GF1",
          },
          {
            value: "GF2",
            label: "GF2",
          },
          {
            value: "ZY3",
            label: "ZY3",
          },
        ],
        sersorList: [
          {
            value: "",
            label: "请选择",
          },
          {
            value: "PMS",
            label: "PMS",
          },
          {
            value: "WFV",
            label: "WFV",
          },
        ],
        cronList: [],
  
        getColumns: [
          //表头
          {
            type: "index",
            title: "序号",
            width: 80,
            align: "center",
          },
          {
            key: "taskName",
            title: "任务名称",
            align: "center",
            _style: "width:auto;background:rgba(241,244,249,1);",
          },
          {
            key: "sourceId",
            title: "任务类型",
            align: "center",
            _style: "width:auto;background:rgba(241,244,249,1);",
          },
          {
            key: "crontabExpressDescribe",
            title: "扫描间隔",
            align: "center",
            _style: "width:auto;background:rgba(241,244,249,1);",
          },
          {
            key: "createTime",
            title: "创建时间",
            align: "center",
            _style: "width:210px;background:rgba(241,244,249,1);",
          },
          {
            title: "操作",
            key: "show_details",
            _style: "width:220px;background:rgba(241,244,249,1);",
            align: "center",
            render: (h, params) => {
              return h("div", [
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small",
                    },
                    style: {
                      marginRight: "5px",
                      display: params.row.status == 1 ? "inline-block" : "none",
                    },
                    on: {
                      click: () => {
                        this.run(params.row);
                      },
                    },
                  },
                  "启用"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small",
                    },
                    style: {
                      marginRight: "5px",
                      display: params.row.status == 0 ? "inline-block" : "none",
                    },
                    on: {
                      click: () => {
                        this.ban(params.row);
                      },
                    },
                  },
                  "暂停"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small",
                    },
                    style: {
                      marginRight: "5px",
                      
                    },
                    on: {
                      click: () => {
                        this.update(params.row);
                      },
                    },
                  },
                  "编辑"
                ),
                h(
                  "Button",
                  {
                    props: {
                      type: "primary",
                      size: "small",
                    },
                    on: {
                      click: () => {
                        this.del(params.row);
                      },
                    },
                  },
                  "删除"
                ),
              ]);
            },
          },
        ],
        getAxios: {},
        setIntervalTime: "",
      };
    },
    computed: {},
    mounted() {
      // 获取数据
      this.getCronList(); //refreshTable()在获取"扫描间隔"成功后执行
    },
    methods: {
      //表格分页
      getPageData(AllData) {
        let currentPage = this.currentPage;
        let pageSize = this.pageSize;
        this.data = [];
        let beginIndex = (currentPage - 1) * pageSize;
        let lastIndex = currentPage * pageSize - 1; //9
        for (let i = beginIndex; i < AllData.length; i++) {
          let temp = AllData[i];
  
          if (i > lastIndex) break;
          this.data.push(temp);
        }
  
        this.allNum = AllData.length;
        this.total = Math.ceil(AllData.length / this.pageSize);
        for (let i = 0; i < AllData.length; i++) {
          if (i > lastIndex) break;
          this.data[i].number = (this.currentPage - 1) * this.pageSize + i + 1;
        }
      },
      // 页码改变
      pageChange(page) {
        this.pageNum = page;
        this.currentPage = page;
        this.getPageData(this.allDataList);
      },
      //每页条数
      pageSizeChange(pageSise) {
        this.pageSize = pageSise;
        this.getPageData(this.allDataList);
      },
      //获取扫描间隔
      getCronList() {
        let path = this.$api.taskManageApi.getAllChildByDictCode;
        let param = {
          // dictCode: "cron",
          dictCode: "SMJG",
        };
        this.http.get(path, param).then((res) => {
          if (res.data.code == 0) {
            let dictCodeList = res.data.data.dictCodeList;
            this.cronList.push({ label: "请选择", value: "" });
            for (let dictCode of dictCodeList) {
              let cron = {
                label: dictCode.dictName,
                value: dictCode.dictCode,
              };
              this.cronList.push(cron);
            }
          } else {
            this.$Message.error(res.data.message);
          }
          this.refreshTable();
        });
      },
      //数据
      refreshTable() {
        let self = this;
        self.data = [];
        let pageSize = this.pageSize;
        let path = this.$api.taskManageApi.queryCopy;
        let param = {
          // pageNum: self.pageNum,
          name: self.name,
          status: self.status,
          pageSize: pageSize,
        };
        this.http.get(path, param).then((res) => {
          self.loading = false;
          if (res.data.code == 0) {
            self.total = Math.ceil(res.data.data.count / self.pageSize);
            let dataList = [];
            for (let i in res.data.data.dataList) {
              let data = res.data.data.dataList[i];
              for (let cron of this.cronList) {
                if (data.crontabExpress == cron.value) {
                  data.crontabExpress = cron.label;
                }
              }
              if (data.sourceId == "6") {
                //根据sourceId来判断是否属于风险监测
                dataList.push({
                  flowName: data.flowName,
                  createTime: data.createTime,
                  crontabExpress: data.crontabExpress,
                  crontabExpressDescribe: data.crontabDescribe,
                  flowId: data.flowId,
                  flowParameter: data.flowParameter,
                  id: data.id,
                  javaBeanName: data.javaBeanName,
                  lastScanTime: data.lastScanTime,
                  number: data.number,
                  runState: data.runState,
                  sourceId: "定期风险监测任务",
                  sourceType: data.sourceType,
                  status: data.status,
                  taskName: data.taskName,
                  taskParameter: data.taskParameter,
                  userId: data.userId,
                });
              }
            }
            this.allDataList = dataList;
            this.allNum = this.allDataList.length;
            this.getPageData(this.allDataList);
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      closeupdateTask(params) {
        this.updateTask = params;
        this.refreshTable();
      },
  
      // 按任务名称搜索
      getTaskList() {
        this.currentPage = 1;
        this.refreshTable();
      },
  
      // 创建任务
      add() {
        this.addTask = true;
        this.$refs.addTaskRegularRisk.cronList = this.cronList;
        this.$refs.addTaskRegularRisk.init();
      },
      addTaskCancel() {
        this.$refs.addTaskRegularRisk.cancle();
      },
      addTaskOk() {
        this.$refs.addTaskRegularRisk.save(this.sourceId);
        this.$refs.addTaskRegularRisk.isShow = false;
      },
      closeAddTask123(params) {
        this.updateTask = params;
        this.refreshTable();
        this.addTask = false;
      },
  
      // 启用任务
      run(val) {
        this.runShow = true;
        this.updata = val;
        console.log(this.updata, "输出选中的数据");
        this.clickId = val.id;
      },
      runOk() {
        let path = this.$api.taskManageApi.updateStatusCopy + "/" + this.clickId;
        let param = {
          status: 0,
        };
        this.runShow = false;
        this.http.get(path, param).then((res) => {
          if (res.data.success) {
            this.$Message.success("启动成功");
            this.refreshTable();
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      runCancel() {
        this.runShow = false;
      },
  
      // 暂停任务
      ban(val) {
        this.banShow = true;
        this.updata = val;
        this.clickId = val.id;
      },
      banOk() {
        let path = this.$api.taskManageApi.updateStatusCopy + "/" + this.clickId;
        let param = {
          status: 1,
        };
        this.banShow = false;
        this.http.get(path, param).then((res) => {
          if (res.data.success) {
            this.$Message.success("暂停成功");
            this.refreshTable();
          } else {
            this.$Message.error(res.data.message);
          }
        });
      },
      banCancel() {
        this.banShow = false;
      },
      // 编辑表格数据
      update(val) {
        this.updId = val.id;
        this.updateTask = true;
        this.$refs.updateTaskRegularRisk.getAuto(this.updId);
      },
      updateTaskCancel() {
        this.updateTask = false;
      },
      updateTaskOk() {
        this.$refs.updateTaskRegularRisk.save(this.updId);
      },
  
      //删除表格数据
      delCancel() {
        this.delShow = false;
      },
      del(val) {
        this.delShow = true;
        this.clickId = val.id;
      },
      delOk() {
        let self = this;
        this.delShow = false;
        let path = this.$api.taskManageApi.deleteCopy + "/" + this.clickId;
        this.http.delete(path).then((res) => {
          if (res.data.success) {
            this.$Message.success(res.data.message);
            this.refreshTable();
          } else {
            this.$Message.error(res.data.message);
          }
        });
        this.delShow = false;
      },
    },
    watch: {
      data(newVal, oldVal) {
        this.$nextTick(function () {
          this.GlobalPermissionRender.render();
        });
      },
      groupName(newVal, oldVal) {
        if (newVal.length >= 50) {
          this.$Message.warning("任务名称长度不得超过50个字符");
        } else {
        }
        // if(newVal != ""){
        // this.changestatus = true
        // }else{
        // this.changestatus = false
        // }
      },
      // pageSize(newVal, oldVal) {
      //   this.pageSize = newVal;
      //   this.getTaskTableData();
      // },
      // currentPage(newVal, oldVal) {
      //   this.currentPage = newVal;
      //   this.getTaskTableData();
      // },
      startDate(newVal, oldVal) {
        this.startDate = this.$moment(newVal).format("YYYY-MM-DD HH:mm:ss");
      },
      endDate(newVal, oldVal) {
        this.endDate = this.$moment(newVal).format("YYYY-MM-DD HH:mm:ss");
      },
    },
  };
  </script>
  
  
  <!--css样式-->
  <style scoped>
  .myCol {
    /*margin-left: 10px;*/
    display: flex;
    align-items: center;
    padding-left: 0;
  }
  .search {
    display: flex;
  }
  
  .btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.76563rem;
    line-height: 1.5;
    border-radius: 0.2rem;
    width: 50px;
  }
  .table-responsive {
    height: 50% !important;
  }
  .labelName {
    margin-bottom: 0;
    margin-right: 5px;
    font-size: 18px;
  }
  .headerFont {
    font-size: 18px;
  }
  .groupNameWidth {
    width: 197px;
  }
  
  .ivu-radio-wrapper {
    margin-left: 0px;
  }
  .rowMargin {
    margin-bottom: 20px;
  }
  .dateMargin {
    margin-top: -5px;
  }
  .endMargin {
    margin-left: 19px;
  }
  .youxianji {
    margin-left: -5px;
  }
  /deep/.ivu-radio-wrapper {
    margin-bottom: 0;
  }
  .btn-info {
    width: 90px;
  }
  
  .clean {
    margin-left: 10px;
  }
  .page-link {
    cursor: pointer;
  }
  .pageContent {
    margin-right: 26px;
    font-size: 14px;
  }
  .selectStyle {
    display: inline-block;
    width: 100px;
    margin-right: 5px;
  }
  .footerPage {
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
    color: black;
  }
  
  /* xg */
  .btnStyle {
    padding: 0;
    margin: 0 3px;
  }
  
  .tablePosition {
    /* margin-top: -23px; */
    height: calc(100% - 140px);
    overflow-y: auto;
  }
  
  /deep/ .row {
    margin-right: 0;
    margin-left: 10px;
  }
  
  /deep/ .footerPage {
    padding-right: 0;
  }
  
  /deep/.ivu-table td.centerText {
    text-align: center;
    text-align: -moz-center;
    text-align: -webkit-center;
  }
  
  .card-body {
    overflow-y: auto;
    height: calc(100% - 52px) !important;
  }
  </style>
  <style scoped>
  .tempxyz .card-body {
    position: static;
    padding: 0 20px;
  }
  
  /deep/.form-control {
    padding: 0;
  }
  .pageStyle {
    position: absolute;
    right: 25px;
    margin-top: 15px;
  }
  .delAnniu {
    background-color: gray !important;
    border-color: gray !important;
  }
  .delAnniu:hover {
    background-color: rgb(187, 177, 177) !important;
    border-color: gray !important;
  }
  .btn-info {
    color: #fff;
    background-color: #3c6ef0;
    border-color: #3c6ef0;
    height: 40px;
  }
  
  .btn-info:hover {
    color: #fff;
    background-color: rgba(0, 0, 0, 0.2);
    border-color: #698cf7;
  }
  </style>
  